<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100%; display:block; }
        </style>
        <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript"
                src="https://maps.google.com/maps/api/js?sensor=true">
        </script>
        
<!--     para cargar la pagina cada 360 segundos-->
        <meta http-equiv=refresh content=360>

        <script type="text/javascript">

            $(document).ready(function () {
                var latlng = new google.maps.LatLng(-3.9898774573738045, -79.20441094455714); // los parametros siempre se transmiten en este orden: (latitud,longitud)
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

//                $.doc("", function () {
//                    var address = document.getElementById("address").value;
//                    geocoder.geocode( { 'address': address}, function(results, status) {
//                        if (status == google.maps.GeocoderStatus.OK) {
//                            map.setCenter(results[0].geometry.location);
//                            var marker = new google.maps.Marker({
//                                map: map,
//                                position: results[0].geometry.location
//                            });
//                        } else {
//                            alert("Geocode was not successful for the following reason: " + status);
//                        }
//                    });
//                })
                
                
                $.get("sitemap.php", function (xml) {
                    $(xml).find("marker").each(function () { /*loop*/

                        var lat = $(this).attr('lat');
                        var lng = $(this).attr('lng');
                        var title = $(this).attr('title');
                        var content = $(this).attr('content');
                        var icon = $(this).attr('icon');
                        var id = $(this).attr('id');

                        var infoWindow = new google.maps.InfoWindow({
                            content: content
                        });

                        var marcador = new google.maps.Marker({
                            position: new google.maps.LatLng(lat, lng),
                            map: map,
                            title: title,
                            icon: icon
                        })

                    });/** end loop*/

                }); /* end document ready*/

            });

        </script>
    </head>

    <body>
        <div id="map_canvas"></div>
        <div>
            <input id="address" type="textbox" value="Sydney, NSW">
            <input type="button" value="Endoce" onclick="codeAddress()">
        </div>
    </body>
</html>
